<template>
<div>
	<city-header></city-header>
	<city-search :cities="cities"></city-search>
	<city-list :hot="hotCities" :cities="cities" :letter="letter"></city-list>
	<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
</div>
</template>

<script>
import CityHeader from './components/Header.vue'
import CitySearch from './components/Search.vue'
import CityList from './components/List.vue'
import CityAlphabet from './components/Alphabet.vue'
import axios from 'axios'
export default {
	name: 'City',
	components: {
		CityHeader: CityHeader,
		CitySearch: CitySearch,
		CityList: CityList,
		CityAlphabet: CityAlphabet
	},
	data() {
    	return {
      		city: '',
      		hotCities: [],
      		cities: {},
      		letter: ''
    	}
  	},
  	methods: {
    	getCityInfo() {
      		axios.get('/api/city.json')
        		.then(this.getCityInfoSuc)
    	},
    	getCityInfoSuc(res) {
      		res = res.data
      		if (res.ret && res.data){
        		this.city = res.data.city
        		this.hotCities=res.data.hotCities
        		this.cities = res.data.cities
      		}
      		console.log(res)
    	},
    	handleLetterChange(letter) {
    		this.letter = letter
    	}
  	},
  	mounted () {
    	this.getCityInfo()
  	}
}
</script>

<style lang="stylus" scoped>	
</style>